<!--
 * @Description:非tabbar页面使用的底部操作栏
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-18 16:10:00
 * @LastEditors: Wang Xi
 * @LastEditTime: 2023-5-18 18:30:00
-->
<template>
	<view class="not-tabbar-container">
		<slot />
		<view class="left-filleted-corner"></view>
		<view class="right-filleted-corner"></view>
	</view>
</template>

<script>
	/**
	 * notTabbar 操作栏
	 * @description 该组件一般用于非tabbar页面使用的底部操作栏。仅仅是为了样式不复写，主要内容都靠插槽
	 */
	export default {
		name: "notTabbar",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	$filleted-corner-width: 48rpx;
	$theme-color: #1b1c28;

	.not-tabbar-container {
		height: 140rpx;
		background-color: #000;
		width: 100%;
		position: fixed;
		bottom: 0;

		.left-filleted-corner {
			position: absolute;
			top: -$filleted-corner-width + 1;
			left: 0;
			width: $filleted-corner-width;
			height: $filleted-corner-width;
			background-color: transparent;
			overflow: hidden;

			&::before {
				content: "";
				position: absolute;
				bottom: -$filleted-corner-width;
				left: -$filleted-corner-width;
				width: $filleted-corner-width * 2;
				height: $filleted-corner-width * 2;
				background-color: transparent;
				border-radius: 50%;
				border: $filleted-corner-width solid $theme-color;
			}
		}

		.right-filleted-corner {
			position: absolute;
			top: -$filleted-corner-width + 1;
			right: 0;
			width: $filleted-corner-width;
			height: $filleted-corner-width;
			background-color: transparent;
			overflow: hidden;

			&::before {
				content: "";
				position: absolute;
				bottom: -$filleted-corner-width;
				right: -$filleted-corner-width;
				width: $filleted-corner-width * 2;
				height: $filleted-corner-width * 2;
				background-color: transparent;
				border-radius: 50%;
				border: $filleted-corner-width solid $theme-color;
			}
		}
	}
</style>
